<template>
	<div class="wrapper">
	  <!-- header部分 -->
	  <header>
		<p>商家信息</p>
	  </header>
  
	  <!-- 商家logo部分 -->
	  <div class="business-logo">
		<img :src="business.businessImg" alt="商家Logo" />
	  </div>
  
	  <!-- 商家信息部分 -->
	  <div class="business-info">
		<h1>{{ business.businessName }}</h1>
		<p>&#165;{{ business.starPrice }}起送 &#165;{{ business.deliveryPrice }}配送</p>
		<p>{{ business.businessExplain }}</p>
	  </div>
  
	  <!-- 食品列表部分 -->
	  <ul class="food">
		<li v-for="(item, index) in foodArr" :key="item.foodId">
		  <div class="food-left">
			<img :src="item.foodImg" alt="食品图片" />
			<div class="food-left-info">
			  <h3>{{ item.foodName }}</h3>
			  <p>{{ item.foodExplain }}</p>
			  <p>&#165;{{ item.foodPrice }}</p>
			</div>
		  </div>
		  <div class="food-right">
			<div>
			  <i
				class="fa fa-minus-circle"
				@click="minus(index)"
				v-show="item.quantity != 0"
			  ></i>
			</div>
			<p><span v-show="item.quantity != 0">{{ item.quantity }}</span></p>
			<div>
			  <i class="fa fa-plus-circle" @click="add(index)"></i>
			</div>
		  </div>
		</li>
	  </ul>
  
	  <!-- 购物车部分 -->
	  <div class="cart">
		<div class="cart-left">
		  <div
			class="cart-left-icon"
			:style="totalQuantity == 0 ? 'background-color:#505051;' : 'background-color:#3190E8;'"
		  >
			<i class="fa fa-shopping-cart"></i>
			<div
			  class="cart-left-icon-quantity"
			  v-show="totalQuantity != 0"
			>{{ totalQuantity }}</div>
		  </div>
		  <div class="cart-left-info">
			<p>&#165;{{ totalPrice }} <i class="fa fa-caret-up" @click="toggleDetails"></i></p>
			<p>另需配送费{{ business.deliveryPrice }}元</p>
		  </div>
		</div>
  
		<div class="cart-right">
		  <!-- 不够起送费 -->
		  <div
			class="cart-right-item"
			v-show="totalSettle < business.starPrice"
			style="background-color: #535356; cursor: default;"
		  >
			&#165;{{ business.starPrice }}起送
		  </div>
		  <!-- 达到起送费 -->
		  <div
			class="cart-right-item"
			@click="toOrder"
			v-show="totalSettle >= business.starPrice">
			去结算
		  </div>
		</div>
  
		<!-- 订单明细部分 -->
		<transition name="slide-fade">
        <div class="order-detail" v-if="isShowDetailet">
          <ul class="order-detailet">
            <li v-for="item in foodArr" >
				<li v-if="item.quantity > 0">
              <p>{{item.foodName}} x {{item.quantity}}</p>
              <p>&#165;{{item.foodPrice * item.quantity}}</p>
					</li>
            </li>
            <li>
              <p>配送费</p>
              <p>&#165;{{business.deliveryPrice}}</p>
            </li>
          </ul>
        </div>
      </transition>
	
	  </div>
  
	  <ul class="block">
		<p>&nbsp;</p>
	  </ul>
	</div>
  </template>
  
  <script>
  import { ref, computed, onMounted } from "vue";
  import { useRouter, useRoute } from "vue-router";
  import Footer from "../components/Footer.vue";
  import { getSessionStorage, setLocalStorage, removeLocalStorage } from "../common.js";
  import axios from "axios";
  import qs from "qs"; // 确保已经安装了 'qs' 包
  
  export default {
	name: "BusinessInfo",
	components: { Footer },
	setup() {
	  const router = useRouter();
	  const route = useRoute();
	  const businessId = ref(route.query.businessId);
	  const business = ref({});
	  const foodArr = ref([]);
	  const user = ref({});
	  const isShowDetailet = ref(false);
  
	  // 计算属性
	  const totalPrice = computed(() => {
		return foodArr.value.reduce((total, item) => {
			return Math.round((total + item.foodPrice * item.quantity) * 100) / 100;
		}, 0);
		});

	  const totalQuantity = computed(() => {
		return foodArr.value.reduce((quantity, item) => quantity + item.quantity, 0);
	  });
  
	  const totalSettle = computed(() => {
		return totalPrice.value + (business.value.deliveryPrice || 0);
	  });
  
	  // 获取购物车数据
	  const listCart = () => {
		axios
		  .get("/Cart", {
			params: {
			  businessId: businessId.value,
			  userId: user.value.userId,
			},
		  })
		  .then((response) => {
			const cartArr = response.data;
			foodArr.value.forEach((foodItem) => {
			  foodItem.quantity = 0;
			  cartArr.forEach((cartItem) => {
				if (cartItem.foodId === foodItem.foodId) {
				  foodItem.quantity = cartItem.quantity;
				}
			  });
			});
			// 根据需要排序，假设按 foodId 升序
			foodArr.value.sort((a, b) => a.foodId - b.foodId);
		  })
		  .catch((error) => {
			console.error(error);
		  });
	  };
  
	  // 切换订单详情显示
	  const toggleDetails = () => {
		isShowDetailet.value = !isShowDetailet.value;
	  };
  
	  // 添加到购物车
	  const add = (index) => {
		if (!user.value) {
		  router.push({ path: "/choselogin" });
		  return;
		}
  
		if (foodArr.value[index].quantity === 0) {
		  // 插入购物车
		  saveCart(index);
		} else {
		  // 更新购物车
		  updateCart(index, 1);
		}
	  };
  
	  // 从购物车减少
	  const minus = (index) => {
		if (!user.value) {
		  router.push({ path: "/login" });
		  return;
		}
  
		if (foodArr.value[index].quantity > 1) {
		  // 更新购物车
		  updateCart(index, -1);
		} else {
		  // 从购物车移除
		  removeCart(index);
		}
	  };
  
	  // 保存到购物车
	  const saveCart = (index) => {
		axios
		  .post(
			"/Cart",
			qs.stringify({
			  businessId: businessId.value,
			  userId: user.value.userId,
			  foodId: foodArr.value[index].foodId,
			})
		  )
		  .then((response) => {
			if (response.data == 1) {
			  // 更新食品数量为1
			  foodArr.value[index].quantity = 1;
			  foodArr.value.sort((a, b) => a.foodId - b.foodId);
			} else {
			  alert("向购物车中添加食品失败！");
			}
		  })
		  .catch((error) => {
			console.error(error);
		  });
	  };
  
	  // 更新购物车
	  const updateCart = (index, num) => {
		axios
		  .put(
			"/Cart",
			qs.stringify({
			  businessId: businessId.value,
			  userId: user.value.userId,
			  foodId: foodArr.value[index].foodId,
			  quantity: foodArr.value[index].quantity + num,
			})
		  )
		  .then((response) => {
			if (response.data == 1) {
			  // 更新食品数量
			  foodArr.value[index].quantity += num;
			  foodArr.value.sort((a, b) => a.foodId - b.foodId);
			} else {
			  alert("向购物车中更新食品失败！");
			}
		  })
		  .catch((error) => {
			console.error(error);
		  });
	  };
  
	  // 从购物车移除
	  const removeCart = (index) => {
		const params = new URLSearchParams();
		params.append("businessId", businessId.value);
		params.append("userId", user.value.userId);
		params.append("foodId", foodArr.value[index].foodId);
  
		axios
		  .delete(`/Cart?${params.toString()}`)
		  .then((response) => {
			if (response.data === 1) {
			  // 更新食品数量为0
			  foodArr.value[index].quantity = 0;
			  foodArr.value.sort((a, b) => a.foodId - b.foodId);
			} else {
			  alert("从购物车中删除食品失败！");
			}
		  })
		  .catch((error) => {
			console.error(error);
		  });
	  };
  
	  // 去结算
	  const toOrder = () => {
		router.push({ path: "/orders", query: { businessId: business.value.businessId } });
	  };
  
	  onMounted(() => {
		user.value = getSessionStorage("user");
		if (!businessId.value) {
		  console.error("No businessId found in route query");
		  return;
		}
  
		// 获取商家信息
		axios
		  .get(`/Business/businessId/${businessId.value}`)
		  .then((response) => {
			business.value = response.data;
		  })
		  .catch((error) => {
			console.error(error);
		  });
  
		// 获取食品信息
		axios
		  .get(`/Food/businessId/${businessId.value}`)
		  .then((response) => {
			foodArr.value = response.data;
			foodArr.value.forEach((food) => {
			  food.quantity = 0;
			});
  
			if (user.value) {
			  listCart();
			}
		  })
		  .catch((error) => {
			console.error(error);
		  });
	  });
  
	  return {
		business,
		foodArr,
		user,
		isShowDetailet,
		totalPrice,
		totalQuantity,
		totalSettle,
		toggleDetails,
		add,
		minus,
		toOrder,
	  };
	},
  };
  </script>
  
  <style scoped>
  /****************** 总容器 ******************/
  .wrapper {
	width: 100%;
	height: 100%;
  }
  
  /****************** header部分 ******************/
  .wrapper header {
	width: 100%;
	height: 12vw;
	background-color: #0097FF;
	color: #fff;
	font-size: 4.8vw;
  
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1000;
  
	display: flex;
	justify-content: center;
	align-items: center;
  }
  
  /****************** 商家logo部分 ******************/
  .wrapper .business-logo {
	width: 100%;
	height: 35vw;
	/*使用上外边距避开header部分*/
	margin-top: 12vw;
  
	display: flex;
	justify-content: center;
	align-items: center;
  }
  .wrapper .business-logo img {
	width: 40vw;
	height: 30vw;
	border-radius: 5px;
  }
  
  /****************** 商家信息部分 ******************/
  .wrapper .business-info {
	width: 100%;
	height: 20vw;
  
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
  }
  .wrapper .business-info h1 {
	font-size: 5vw;
  }
  .wrapper .business-info p {
	font-size: 3vw;
	color: #666;
	margin-top: 1vw;
  }
  
  /****************** 食品列表部分 ******************/
  .wrapper .food {
	width: 100%;
	/*使用下外边距避开footer部分*/
	margin-bottom: 40vw;
  }
  .wrapper .food li {
	width: 100%;
	box-sizing: border-box;
	padding: 2.5vw;
	user-select: none;
  
	display: flex;
	justify-content: space-between;
	align-items: center;
  }
  .wrapper .food li .food-left {
	display: flex;
	align-items: center;
  }
  .wrapper .food li .food-left img {
	width: 20vw;
	height: 20vw;
  }
  .wrapper .food li .food-left .food-left-info {
	margin-left: 3vw;
  }
  .wrapper .food li .food-left .food-left-info h3 {
	font-size: 3.8vw;
	color: #555;
  }
  .wrapper .food li .food-left .food-left-info p {
	font-size: 3vw;
	color: #888;
	margin-top: 2vw;
  }
  .wrapper .food li .food-right {
	width: 16vw;
	display: flex;
	justify-content: space-between;
	align-items: center;
  }
  .wrapper .food li .food-right .fa-minus-circle {
	font-size: 5.5vw;
	color: #999;
	cursor: pointer;
  }
  .wrapper .food li .food-right p {
	font-size: 3.6vw;
	color: #333;
  }
  .wrapper .food li .food-right .fa-plus-circle {
	font-size: 5.5vw;
	color: #0097EF;
	cursor: pointer;
  }
  
  /****************** 购物车部分 ******************/
  .wrapper .cart {
	width: 100%;
	height: 14vw;
  
	position: fixed;
	left: 0;
	bottom: 0;
  
	display: flex;
  }
  .wrapper .cart .cart-left {
	flex: 2;
	background-color: #505051;
	display: flex;
  }
  .wrapper .cart .cart-left .cart-left-icon {
	width: 16vw;
	height: 16vw;
	box-sizing: border-box;
	border: solid 1.6vw #444;
	border-radius: 8vw;
	background-color: #3190E8;
	font-size: 7vw;
	color: #fff;
  
	display: flex;
	justify-content: center;
	align-items: center;
  
	margin-top: -4vw;
	margin-left: 3vw;
  
	position: relative;
  }
  .wrapper .cart .cart-left .cart-left-icon-quantity {
	width: 5vw;
	height: 5vw;
	border-radius: 2.5vw;
	background-color: red;
	color: #fff;
	font-size: 3.6vw;
  
	display: flex;
	justify-content: center;
	align-items: center;
  
	position: absolute;
	right: -1.5vw;
	top: -1.5vw;
  }
  .wrapper .cart .cart-left .cart-left-info p:first-child {
	font-size: 4.5vw;
	color: #fff;
	margin-top: 1vw;
  }
  .wrapper .cart .cart-left .cart-left-info p:last-child {
	font-size: 2.8vw;
	color: #AAA;
  }
  
  .wrapper .cart .cart-right {
	flex: 1;
  }
  
  /* 定义过渡效果 */
  .slide-fade-enter-active {
	transition: all 0.3s ease;
  }
  .slide-fade-leave-active {
	transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
  }
  .slide-fade-enter-from,
  .slide-fade-leave-to {
	transform: translateY(100%);
	opacity: 0;
  }
  
  /* 使订单详细信息向上滑动 */
  .order-detail {
	position: absolute;
	bottom: calc(100% + 1.6vw + 15px); /* 初始位置在购物车图标下方 */
	left: 0;
	width: 100%;
	background-color: white;
	border: 1px solid blue; /* 添加蓝色边框 */
	border-top: 1px solid #ddd;
	padding: 10px;
	box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
	transition: all 0.3s ease;
	z-index: 1000;
  }
  
  /* 使订单详细信息向上滑动 */
  .order-detail.show {
	transform: translateY(-100%);
  }
  .order-detail.hide {
	transform: translateY(100%);
  }
  
  /* 达到起送费时的样式 */
  .wrapper .cart .cart-right .cart-right-item {
	width: 100%;
	height: 100%;
	background-color: #38CA73;
	color: #fff;
	font-size: 4.5vw;
	font-weight: 700;
	user-select: none;
	cursor: pointer;
  
	display: flex;
	justify-content: center;
	align-items: center;
  }
  
  /* 底部空白处 */
  .wrapper .block {
	padding-bottom: 5vw;
  }
  
  /* 不够起送费时的样式（只有背景色和鼠标样式的区别） */
  /*
  .wrapper .cart .cart-right .cart-right-item{
	width: 100%;
	height: 100%;
	background-color: #535356;
	color: #fff;
	font-size: 4.5vw;
	font-weight: 700;
	user-select: none;
	
	display: flex;
	justify-content: center;
	align-items: center;
  }
  */
  </style>
  